<script>
const app = getApp();
export default {
  name: "td-orders",
  props: {
    orderList: {
      type: Array,
      default: [],
    },
    source: {
      type: String,
      default: ''
    },
  },
  data() {
    return {
      BestImgUrl: app.globalData.imgurl,
      imgurlBwc: app.globalData.imgurlBwc,

      order_id: "",
      more: false,

      order_item: {
        package: {
          images: []
        },
        shop: {
          name: ''
        },
        package_name: ''
      },
      goodsImage: [],//页面大图的ref索引

    }
  },
  mounted() {
    console.log('订单路径类型==', this.source)
  },
  methods: {
    // 自主核销
    toUse(item){
      let that = this
      uni.showModal({
        title: '提示',
        content: '确定您已到店并需自主核销，核销后代表该订单您已消费；不可退款。如未消费请取消；避免售后问题。',
        confirmColor: '#FF4910',
        cancelText: '取消核销',
        confirmText: '确定核销',
        success: function (res) {
          if (res.confirm) {
            //console.log('用户点击确定');
            that.$api.TDheyanmoniOrder({
              order_id: item.id
            }).then(resss => {
              let currentPage = 1
              that.$emit('Getorders', currentPage)
            }).catch(err => {
              uni.showToast({
                title: err.data.msg,
                icon: 'none',
                duration: 2000
              });
            })
          } else if (res.cancel) {
            //console.log('用户点击取消');
          }
        }
      });
    },
    // 订单更多操作
    clickMore(item) {
      if (item.status == 1) {
        this.quxiao(item)
      } else {
        this.tuikuan(item)
      }
    },
    setMore(item) {
      if (this.order_item.id !== item.id) {
        this.order_item.check_time = 2
        item.check_time = 1
        // console.log("11111111111111111111111", item)
      } else {
        if (item.check_time == 1) {
          item.check_time = 2
        } else {
          item.check_time = 1
        }
        // console.log("222222222222222222222", item)
      }
      this.order_item = item
      // console.log("setMore1", item)
      // this.orderList[index].more =  !this.orderList[index].more
      // this.orderList.push()
      // item.more = !item.more
      // console.log("setMore",item)
    },
    // 取消订单
    quxiao(data) {
      let that = this
      data.check_time = 2
      that.order_item = data
      that.order_id = data.id
      this.$emit('quxiao', that.order_id)

    },
    cancel(data) {
      let that = this
      that.cancel_order_popup = false
      that.isPayment = true
      //console.log('用户点击确定')
    },
    //取消支付选中radio
    CancelPaymentChange(e){
      this.cancelPaymentVal = e
    },
    //确认取消支付原因选项
    cancelPayment(){
      let that = this
      // 取消原因为空
      if (that.cancelPaymentVal == ''){
        uni.showToast({
          title: '请选择取消原因',
          icon: 'none',
          duration: 2000
        });
        return
      } else {
        //关闭取消支付原因弹窗
        that.isPayment = false
      }
      // 调用取消订单接口
      this.$api.TDquxiaoOrder({
        cancel_cause: this.cancelPaymentVal,
        order_id: that.order_id
      }).then(res => {
        // console.log('取消原因==', res.data.result)
        uni.showToast({
          title: res.data.msg,
          icon: 'none',
          duration: 2000
        });
        setTimeout(() => {
          that.Getorders()
          that.isPayment = false
        }, 1000)
      }).catch(err => {
        // console.log('取消订单==', err)
        uni.showToast({
          title: err.data.msg,
          icon: 'none',
          duration: 2000
        });
        setTimeout(() => {
          this.Getorders()
          this.isPayment = false
        },  1000)
      })
    },

    // 用户退款
    tuikuan(data) {
      let that = this
      data.check_time = 2
      that.order_id = data.id
      this.$emit('tuikuan', that.order_id)
      /* uni.showModal({
        title: '提示',
        content: '是否要操作退款?',
        confirmColor: '#FF4910',
        success: function (res) {
          if (res.confirm) {
            console.log('用户点击确定', data);
            that.$api.TDtuikuanOrder({
              order_id: data.id
            }).then(resss => {
              uni.showToast({
                title: '退款成功',
                icon: 'none',
                duration: 2000
              })
              let currentPage = 1
              that.$emit('Getorders', currentPage)
            }).catch(err => {
              uni.showToast({
                title: err.data.msg,
                icon: 'none',
                duration: 2000
              });
            })
          } else if (res.cancel) {
            //console.log('用户点击取消');
          }
        }
      }); */
    },
    // 继续支付
    ToDetails(item) {
      this.cancel_order_popup = false
      uni.navigateTo({
        url: '/subpackageA/pages/OrderDetails/OrderDetails?data=' + encodeURIComponent(JSON.stringify(item))
      })
    },
    // 上传笔记、重新上传笔记
    toUploadNote(res) {
      uni.navigateTo({
        url: '/sub_account/pages/upload_note?data=' + encodeURIComponent(JSON.stringify(res)) +  '&source=' + this.source
      })
    },
    //  晒图
    ToAddImg(data) {
      uni.navigateTo({
        url: '/sub_account/pages/add_shaitu?data=' + encodeURIComponent(JSON.stringify(data)) + '&source=' + this.source
      })
    },
    //  再抢一单
    ToAddOrder(id) {
      uni.navigateTo({
        url: '/subpackageA/pages/PackageDetails/PackageDetails?package_id=' + id
      })
    },
    //  联系客服
    telCS(phone){
      uni.makePhoneCall({
        phoneNumber: phone,
        success: function () {
          console.log('拨打电话成功');
        },
        fail: function () {
          console.log('拨打电话失败');
        }
      })
    },
    /* 导航 */
    Daohang(data) {
      console.log("Daohang==",  data.shop.latitude, data.shop.longitude)
      wx.openLocation({
        latitude: Number(data.shop.latitude),
        longitude: Number(data.shop.longitude),
        scale: 18,
        name: data.shop.name,
        address: data.shop.address
      });
    },
    /* 电话 */
    getTelFun(data){
      let Tel = {
        PlatformPhone:data.customer_service_phone,
        shopsPhone: data.shop.reserve_phone.length>0 ? data.shop.reserve_phone[0] : data.shop.tel
      }
      this.$emit('getTelFun', Tel)
    },
    packageimage(data) {
      return data[0]
    },
    // 进入店铺详情页面
    goShopDetails(data){
      // console.log('店铺详情=', data)
      let package_id = data.shop_package_id
      let shopsID = data.shop_id
      uni.navigateTo( {
        url: '/subpackageB/pages/shopsDetails/shopsDetails?package_id=' + package_id + '&shops_id=' + shopsID
      })
    },
    // 订单详情
    ToTDDetails(item, id) {
      uni.navigateTo({
        url: '/subpackageA/pages/TanDianProcess/TanDianProcess?data=' + encodeURIComponent(JSON.stringify(item)) + '&type=' + id
      })
    },
    // 笔记要求详情弹窗
    detail(data) {
      let that = this
      console.log('笔记详情', data)
      that.order_item = data
      this.$emit('showAskFun', data)
    },
    // 需要预约电话弹窗
    TelNeedFun(tel){
      uni.showModal({
        title: '提示',
        content: '商家预约电话：' + tel,
        confirmText: '打电话',
        confirmColor: '#FF4910',
        success: function (res) {
          if (res.confirm) {
            console.log('用户点击确定');
            uni.makePhoneCall({
              phoneNumber: tel,
              success: function () {
                console.log('拨打电话成功');
              },
              fail: function () {
                console.log('拨打电话失败');
              }
            })
          } else if (res.cancel) {
            console.log('用户点击取消');
          }
        }
      });
    },
    // 进入美团官返店铺
    goGFShop(data){
      // console.log('进入店铺=',  data)
      let actionUrl = {
        wxAppid: data.wxAppid,
        wxPath: data.wxPath
      }
      uni.openEmbeddedMiniProgram({
        appId: actionUrl.wxAppid,
        path: actionUrl.wxPath,
        success: function (res) {
          console.log(res)
        },
        fail: function (res) {
          console.log(res)
        }
      })
    },
    // 官返美图订单评价
    goEvaluate(){
      let actionUrl = {
        wxAppid: data.wxAppid,
        wxPath: data.wxPath
      }
      uni.openEmbeddedMiniProgram({
        appId: actionUrl.wxAppid,
        path: actionUrl.wxPath,
        success: function (res) {
          console.log(res)
        },
        fail: function (res) {
          console.log(res)
        }
      })
    },
    // 取消美团官返报名
    cancelOrderFun(data){
      let that = this
      uni.showModal({
        title: '取消美团官返报名',
        content: '确定要取消美团官返报名订单吗？',
        cancelColor: '#999',
        confirmColor: '#FF7900',
        success: res => {
          console.log('res', res)
          if (res.confirm) {
            that.$api.getCancelOfficialActivityAPI({
              userEventId: data.id
            }).then(rees => {
              uni.showToast({
                title: '取消成功',
                icon: 'none',
                duration: 2000
              })
            })
          }
        }
      })
    },
    // 复制订单号
    copy_no(order_no) {
      uni.setClipboardData({
        data: order_no, // e是你要保存的内容
        success: function () {
          uni.showToast({
            title: '复制成功',
            icon: 'none'
          })
        }
      });
    },
    //倒计时计算
    findcountdown(item) {
      const now = new Date().getTime();
      // 待付款倒计时
      if (item.status == 1){
        let endTime = new Date(item.end_time).getTime()
        let isend = endTime - now > 0 ? (endTime - now) : 0;
        let seconds = this.$moment(isend).unix();
        // console.log('结束时间', seconds)
        return seconds
      }
      //待到店使用倒计时
      else if (item.status == 2) {
        let invalidTime = new Date(item.invalid_date).getTime()
        let isend = invalidTime - now > 0 ? (invalidTime - now) : 0;
        let seconds = this.$moment(isend).unix();
        // console.log('结束时间', seconds)
        return seconds
      }
      // 待上传笔记倒计时
      else if (item.status == 3) {
        let expiryTime = new Date(item.expiry_date).getTime()
        let isend = expiryTime - now > 0 ? (expiryTime - now) : 0;
        let seconds = this.$moment(isend).unix();
        // console.log('结束时间', seconds)
        return seconds
      }
      // 驳回倒计时
      else if (item.status == -2) {
        let expiryTime = new Date(item.expiry_date).getTime()
        let isend = expiryTime - now > 0 ? (expiryTime - now) : 0;
        let seconds = this.$moment(isend).unix();
        // console.log('结束时间', seconds)
        return seconds
      }
    },

    // 倒计时结束后执行
    countDownEndFun(){
      uni.reLaunch({
        url: '/pages/orders/orders_gf'
      })
      console.log('倒计时结束')
    },
  },
}
</script>

<template>
<view class="orders-box">
  <view class="order_list_item" v-for="(item,index) in orderList" :key="index">
    <view class="order_title u-flex">
      <view class="shop_title u-flex" @click="copy_no(item.order_no)">
        <text class="text-Omit">订单号：</text>
        <text class="text-Omit">M{{ item.order_no }}</text>
        <image :src="imgurlBwc+'/order/copy@2x.png'" style="margin-left: 10rpx"></image>
      </view>
      <view class="status">
        <!--
          1待付款
          2已付款
          3已核验（等待上传）
          4待审核（已上传）
          5已完成
          -1已取消(超时、自动)
          -2已驳回（审核失败）
          -3已退款（金额原路返回）
        -->
        <text class="color1" v-if="item.status == 1">待付款</text>
        <text class="color1" v-if="item.status == 2">待使用</text>
        <text class="color1" v-if="item.status == 3">已核销，待上传笔记</text>
        <text class="color2" v-if="item.status == 4">审核中</text>
        <text class="color2" v-if="item.status == 5">已完成</text>
        <text class="color2" v-if="item.status == 6">待返款</text>
        <text class="color1" v-if="item.status == 7">任务失效</text>
        <text class="color1" v-if="item.status == 8">订单已超时,任务失效</text>
        <text class="color1" v-if="item.status == -1">已取消</text>
        <text class="color1" v-if="item.status == -2">已驳回</text>
        <text class="color1" v-if="item.status == -3">已退款</text>
      </view>
    </view>
    <view v-if="item.status == 1 || item.status == 2 || item.status == 3 || item.status == -2" class="count_down" style="padding-top: 20rpx;font-size: 24rpx;color: #888888;">
      请在
      <u-count-down
          v-if="item.status == 1 || item.status == 2 || item.status == 3 || item.status == -2"
          :timestamp="findcountdown(item)"
          @end="countDownEndFun"
          :show-days="true"
          :show-border="true"
          font-size="24"
          color="#FF402F"
          bgColor="#fff"
          border-color="#ffffff"
          separator="zh"
          separator-size="20"
          separator-color="#FF4E0D">
      </u-count-down>
      <text v-if="item.status == 1">内支付，过期订单将自动取消</text>
      <text v-if="item.status == 2">内到店核销使用，超时自动取消</text>
      <text v-if="item.status == 3">内上传笔记,过期将无法提交！</text>
      <text v-if="item.status == -2">内重新提交笔记，过期将无法提交！</text>
    </view>
    <view style="padding: 20rpx 0"><u-line color="#F3F3F3"></u-line></view>
    <view class="goods_info u-flex">
      <view @click="goShopDetails(item)" class="goods_img">
        <image :ref="goodsImage[index]" :src="item.package.images[0]" mode="aspectFill" class="goods_img_img"></image>
      </view>
      <view class="goods_name">
        <view @click="goShopDetails(item)">
          <view style="display: flex;align-items: center;justify-content: space-between;">
            <view class="ellipsis-one-line" style="flex: 1;">
              <image style="height: 28rpx;width: 28rpx;" :src="BestImgUrl+'/index/Frame.png'"></image>
              <text style="font-size: 24rpx;color: #AAAAAA;margin-left: 10rpx;">{{ item.shop.name }}</text>
            </view>
            <u-icon name="arrow-right" size="24" color="#AAAAAA" style="padding-left: 10rpx;width:34rpx;height: 24rpx;"></u-icon>
          </view>
          <view class="ellipsis-two-line" style="font-size: 28rpx;color: #333333;margin-top: 10rpx">{{ item.package_name }}</view>
          <view style="font-size: 24rpx;color: #999999;margin-top: 10rpx">
            营业时间：{{ item.shop.open_time }}-{{ item.shop.close_time }}
          </view>
          <view class="goods_warp u-flex" style="justify-content: space-between;">
            <view>
              <view style="margin-top: 10rpx;font-size: 22rpx">
                <view style="border: 2rpx solid #fd5647;border-radius: 10rpx;" class="u-flex">
                  <view style="background-color: #fd5647;border-radius: 10rpx;padding: 6rpx 10rpx;color: #FFFFFF;">
                    先付后返
                  </view>
                  <view style="color: #fd5647;margin: 0 6rpx">{{ item.price }}返{{ item.rebate_amount }}</view>
                </view>
              </view>
              <view style="height: 10rpx"></view>
              <view v-if="item.is_multi_platform == 1" style="border: 2rpx solid #FF7A00;border-radius: 10rpx;padding:6rpx 8rpx;display: flex;justify-content:left;font-size: 24rpx;">
                <view v-for="(platItem,platIndex) in item.note_platforms" :key="platIndex">
                  <text style="font-size: 24rpx;color: #FF7A00;">{{platItem.title}}</text>
                  <text v-if="platIndex < item.note_platforms.length-1" style="padding: 0 6rpx;">|</text>
                </view>
              </view>
              <view v-if="item.is_multi_platform == 0" style="border: 2rpx solid #FF7A00;border-radius: 10rpx;padding:6rpx 8rpx;flex:0.5;text-align: center;">
                <text style="font-size: 24rpx;color: #FF7A00;">{{item.platform_type.title}}</text>
              </view>
            </view>
          </view>
        </view>
        <view class="info_address_right u-flex">
          <view class="right_1" @click="Daohang(item)">
            <image src="/static/tandian/address.png"></image>
            <view>导航</view>
          </view>
          <view class="right_1" @click="getTelFun(item)">
            <image src="/static/tandian/phone.png"></image>
            <view>电话</view>
          </view>
        </view>
      </view>
    </view>
    <view v-if="item.order_type == 2" class="goods_info u-flex">
      <view class="goods_img" style="width: 160rpx;height: 160rpx;">
        <image :ref="goodsImage[index]" :src="item.picture" mode="aspectFill" style="width: 160rpx;height: 160rpx;"></image>
      </view>
      <view class="goods_name">
        <view style="min-height: 80rpx;">
          <image style="height: 28rpx;width: 28rpx" :src="BestImgUrl+'/index/Frame.png'"></image>
          <text style="font-size: 24rpx;color: #AAAAAA;margin-left: 10rpx">{{ item.shop_name }}</text>
        </view>
        <view style="font-size: 28rpx;color: #333333;margin-top: 10rpx">{{ item.package_name }}</view>
        <view style="font-size: 24rpx;color: #999999;margin-top: 10rpx"> 参与时间：{{ item.create_time }}</view>

      </view>
    </view>
    <view style="background-color: #f9f9f9;font-size: 24rpx;color: #3d3d3d;border-radius: 10rpx;padding: 20rpx;margin-bottom: 20rpx">
      <view class="u-flex">
        <view style="width: 100rpx;flex: 1">使用规则</view>
        <view v-if="item.is_reservation == 2" style="color: #999999;margin-left: 15rpx;flex: 5">
          <text  style="color: #fd6a00;">免预约 | 无需预约</text>
          <text>{{item.weekStuta}}</text>
          均可使用
        </view>
        <view @click="TelNeedFun(item.shop.tel)" v-if="item.is_reservation == 1" style="color: #999999;margin-left: 15rpx;flex: 5">
          <text  style="color: #fd6a00;">需要预约</text>
          <text>{{item.weekStuta}}</text>
          均可使用
        </view>
      </view>
      <view class="u-flex" style="margin-top: 10rpx;position: relative;" @click="detail(item)">
        <view style="width: 100rpx;flex: 1">笔记要求</view>
        <!--<view style="color: #999999;margin-left: 15rpx">
          发布真实体验{{ item.platform_type === 1 ? "小红书" : "大众点评" }}笔记
        </view>-->
        <view v-if="item.is_multi_platform > 0" style="font-size: 24rpx;color: #3D3D3D;margin-left: 16rpx;flex: 4">
          发布真实体验
          <view v-for="(noteItem,noteIndex) in item.note_platforms" :key="noteIndex" style="display: inline-block;font-size: 24rpx;">
            {{ noteItem.title }}
            <text v-if="noteIndex !== item.note_platforms.length - 1" style="padding: 0">+</text>
          </view>
          笔记
        </view>
        <view v-else style="font-size: 24rpx;color: #3D3D3D;margin-left: 16rpx;flex: 4">
          发布真实体验{{ item.platform_type.title }}笔记
        </view>
        <view style="color: #999999;margin-left: 10rpx">详情</view>
        <image :src="imgurlBwc+'/order/right@2x.png'"
               style="margin-left: 10rpx;height: 21rpx;width: 12rpx;margin-top: 2rpx"></image>
        <view class="mustSee" style="color: white;font-size: 22rpx">必看</view>
      </view>
      <view class="u-flex" style="margin-top: 10rpx">
        <view style="width: 100rpx;flex: 1">参与时间</view>
        <view style="color: #999999;margin-left: 15rpx;flex: 5">{{ item.create_time }}</view>
      </view>
      <view class="u-flex" style="margin-top: 10rpx" @click="Daohang(item)">
        <view style="width: 100rpx;">门店地址</view>
        <view style="margin-left: 15rpx;flex: 5;display: flex;align-items: center">
          <view style="color: #999999;">{{ item.shop.address }}</view>
          <image :src="imgurlBwc+'/order/right@2x.png'"
                 style="margin-left: 10rpx;height: 21rpx;width: 12rpx;margin-top: 2rpx"></image>
        </view>
      </view>
    </view>
    <view v-if="item.order_type === 2" style="background-color: #f9f9f9;font-size: 24rpx;color: #3d3d3d;border-radius: 10rpx;padding: 20rpx;margin-bottom: 20rpx">
      <view class="u-flex">
        <view style="width: 120rpx;">减免规则：</view>
        <view style="display: flex;align-items: center;flex: 1">
          <view>本单返实付的</view>
          <view style="color: #FE874B;font-size: 26rpx;">{{ item.general_commission.ratio }}%</view>
          <view style="width: 2rpx;height: 30rpx;margin: 0 10rpx;background: #dddddd"></view>
          <view>最高返</view>
          <view style="color: #FE874B;font-size: 26rpx;">{{ item.general_commission.maxCommission }}元</view>
        </view>
      </view>
      <view style="margin-top: 10rpx;position: relative;">
        <view style="width: 120rpx;">商家要求：</view>
        <view style="font-size: 24rpx;color: #3D3D3D;margin-left: 16rpx;line-height: 40rpx">{{ item.activity_ask }}</view>
      </view>
    </view>
    <view class="bohui_yin u-flex" v-if="item.check_refuse_reason && item.status === -2">
      <view>驳回原因：</view>
      <view>{{ item.check_refuse_reason }}</view>
    </view>
    <view class="order_btnzu u-flex">
      <view class="lxkefu u-flex" style="position: relative">
        <button type="default" @click="setMore(item)" v-if="item.status === 1 || item.status === 2 || item.status === 8">
          <view style="color: #999999">更多</view>
        </button>
        <view v-if="item.check_time === 1"
              style=" width: 144rpx;height: 56rpx;line-height: 56rpx;color: #333333;background: #FFFFFF;
          box-shadow: 0 6rpx 16rpx 0 rgba(0,0,0,0.1);border: 2rpx solid #F0F0F0;text-align: center;position: absolute;left: 0;bottom: -60rpx"  @click="clickMore(item)">{{ item.status == 1 ? '取消订单' : '订单退款' }}</view>
        <view v-if="item.status == 5" style="color: #FF5748;font-size: 28rpx">返款金额：￥{{ item.rebate_amount }}</view>
        <view v-if="item.status == -3" style="color: #FF5748;font-size: 28rpx">
          退款金额：￥{{ item.price }}
          <view style="color: #888888;font-size: 24rpx">钱款已原路返回至你原支付账户</view>
        </view>
        <view v-if="item.status == 6" style="color: #FF5748;font-size: 28rpx">待返款金额：￥{{ item.rebate_amount }}</view>
      </view>

      <view class="right_zu u-flex">

        <!--            <view class="kongxin" @click="quxiao(item)" v-if="item.more">取消订单</view>-->
        <!--            <view class="kongxin" @click="tuikuan(item)" v-if="item.status == 2">订单退款</view>-->

        <view class="kongxin" @click="ToTDDetails(item)" v-if="item.status == -2 ">订单详情</view>
        <view class="kongxin" @click="ToAddImg(item)" v-if="item.status == 5 && item.showcase.length == ''" style="color: #FF7800;border-color: #FF7800">晒图</view>
        <view class="shise" @click="ToAddOrder(item.shop_package_id)" v-if="item.status == 4 || item.status == 5 || item.status == -3">再抢一单</view>

        <!--            <view class="shise" @click="YiJianCuiShen(item)" v-if="item.status == 4">一键催审</view>-->
        <view class="shise" @click="toUploadNote(item)" v-if="item.status == -2">重新上传
        </view>

        <view class="shise" @click="toUse(item)" v-if="item.status == 2 && item.shop.check_method == 0">自主核销</view>
        <view class="shise" @click="ToTDDetails(item, item.shop_package_id)" v-if="item.status == 2">展示核销码</view>

        <view class="shise" @click="toUploadNote(item)" v-if="item.status == 3">上传笔记</view>
        <view class="shise" @click="ToAddOrder(item.shop_package_id)" v-if="item.status == -1">重新报名</view>
        <view class="kongxin" @click="telCS(item.shop.tel)" v-if="item.status == 6">联系客服</view>
        <view class="shise" v-if="item.status == 1" @click="ToDetails(item)">继续支付</view>

      </view>
      <view v-if="item.order_type == 2" class="right_zu u-flex">
        <view class="kongxin" @click="cancelOrderFun(item)" v-if="item.code == 3">取消订单</view>
        <view class="shise" @click="goGFShop(item)" v-if="item.code == 3">进入店铺</view>
        <view class="shise" @click="goEvaluate(item)" v-if="item.code == 4">去评价</view>
      </view>

    </view>
  </view>


</view>
</template>

<style scoped lang="scss">
/* 电话、导航css */
.info_address_right {
  width: 200rpx;
  height: 80rpx;
  position: absolute;
  right: 0;
  bottom: 0;
  margin-top: 20rpx;
  align-items: center;
  justify-content: center;
  padding: 0 10rpx;
  .right_1 {
    text-align: center;
    flex: 1;
    padding: 0 10rpx;

    image {
      width: 46rpx;
      height: 46rpx;
      margin-bottom: 6rpx;
    }

    color: $zzy-text-color-666666;
    font-size: 22rpx;
  }
}
</style>